import React from 'react';
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { AutoComplete, DataSourceType,  } from './AutoComplete';

export default {
    title: "Wavexk/AutoComplete",
    component: AutoComplete,
    argTypes: {
        onSelect: {
            description: "Select event",
            action: 'selected',
        },
        fetchSuggestion: {
            description: "click event",
            action: 'clicked'
        }
    }
} as ComponentMeta<typeof AutoComplete>

interface GithubUserProps {
    login: string;  
    url : string;
    avatar_url: string;
}

// const arr: DataSourceType<{ number: number }>[] = [
//     { value: 'abcd', number: 1 }, { value: 'def', number: 1 }, { value: 'ghi', number: 1 },
//     { value: 'jkld', number: 1 }, { value: 'mno', number: 1 }, { value: 'pqr', number: 1 },
//     { value: 'stu', number: 1 }, { value: 'vwx', number: 1 }, { value: 'yz', number: 1 }]


const renderOption = (item: DataSourceType<GithubUserProps>) => {
    return (
        <h3>{item.login} - {item.url}</h3>
    )
}

const Template: ComponentStory<typeof AutoComplete> = (args) => <AutoComplete {...args} /> 

export const Default: ComponentStory<typeof AutoComplete> = Template.bind({})

Default.args = {
    fetchSuggestion: async (query) => {
        const res = await fetch(`https://api.github.com/search/users?q=${query}`);
        const { items } = await res.json();
        console.log(items);
        return items.slice(0, 10).map((item: any) => ({ value: item.login, ...item }));
    },
    onSelect:(item) => {
        console.log(item);
    }
}
